
<style lang="less">
.home {
    margin-top: -10px;
    .ant-card-head {
        margin-bottom: 0px;
    }
    .ant-table td,
    .ant-table tr  {
        white-space: nowrap;
    }

    tr th{
        padding-left: 4px;
        padding-right: 4px; 
    }

    .home-row{
        cursor: pointer;
       
        td{
            padding-top: 8px;
            padding-left: 4px;
            padding-right: 4px;
            padding-bottom: 8px;
        }
    }
}
</style>
<template>
    <div class="home">
        <a-row :gutter="[10, 10]">
            <a-col :span="14">
                <a-row :gutter="[0, 10]">
                    <a-col :span="24">
                        <a-card :title="'待办事项'" :bordered="false" :body-style="bodyStyleVal">
                            <zk-btn slot="extra" @click="toMoreToDoList">更多</zk-btn>
                            <a-table rowKey="bizSerialNo" :rowClassName="()=>'home-row'" :columns="toDoList.columns" :data-source="toDoList.data" :customRow="toDoList.customRow" :scroll="{ x: true }" :pagination="false"></a-table>
                        </a-card>
                    </a-col>
                </a-row>
                <a-row :gutter="[0, 10]">
                    <a-col :span="24">
                        <a-card :title="'已办事项'" :bordered="false" :body-style="bodyStyleVal">
                            <zk-btn slot="extra" @click="toMoreDoneList">更多</zk-btn>
                            <a-table rowKey="bizSerialNo" :rowClassName="()=>'home-row'" :columns="doneList.columns" :data-source="doneList.data" :customRow="doneList.customRow" :scroll="{ x: true }" :pagination="false"></a-table>
                        </a-card>
                    </a-col>
                </a-row>
            </a-col>
            <a-col :span="10">
                <a-row :gutter="[0, 10]">
                    <a-col :span="24">
                        <a-card :title="'新闻通知'" :bordered="false" :body-style="bodyStyleVal" rowClassName="home-row">
                            <zk-btn slot="extra" @click="toMoreNotice">更多</zk-btn>
                            <a-table rowKey="noticeId" :rowClassName="()=>'home-row'" :columns="noticeList.columns" :data-source="noticeList.data" :customRow="noticeList.customRow" :scroll="{ x: true }" :pagination="false" ></a-table>
                        </a-card>
                    </a-col>
                </a-row>
                <a-row :gutter="[0, 10]">
                    <a-col :span="24">
                        <a-card :title="'我的考勤'" :bordered="false" :body-style="bodyStyleVal">
                            <!-- <WorkCalendar></WorkCalendar> -->
                        </a-card>
                    </a-col>
                </a-row>
            </a-col>
        </a-row>
    </div>
</template>
<script>
// import { queryOrderFlowDoneList, queryOrderFlowTodoList } from "@/api/todo";
import ZkList from "@/appBase/ZkList.vue";
import { Radio } from 'ant-design-vue'
// import WorkCalendar from "./components/WorkCalendar.vue";
import {  ZkEllipsis } from '@/appBase/index';
import HeadOper from "../common/components/HeadOper.vue";

export default {
    name: 'Home',
    components: {
        ZkList,
        VRadio:Radio,
        VRadioGroup:Radio.Group,
        HeadOper,
    },
    data() {
        return {
            // 待办
            toDoList: {
                columns: [
                    { title: "事项名称", dataIndex: "bizName",customRender:(text)=>(<ZkEllipsis text={text} maxLength={20}></ZkEllipsis>)},
                    { title: "类型", dataIndex: "bizOrderTypeName",width: '110px' },
                    { title: "申请人", dataIndex: "createdUserName", width: '110px' },
                    { title: "所在部门", dataIndex: "createdDeptName", width: '110px' },
                    { title: "申请时间", dataIndex: "createdTime", width: '150px' },
                    { title: "当前节点", dataIndex: "taskKeyName", width: '150px' },
                ],
                data: [],
                customRow:(record)=>{
                    return {
                        on:{
                            click: (event) => {
                                
                            }
                        }
                    }
                }
            },
            // 已办
            doneList: {
                columns: [
                    { title: "事项名称", dataIndex: "bizName",customRender:(text)=>(<ZkEllipsis text={text} maxLength={20}></ZkEllipsis>) },
                    { title: "类型", dataIndex: "bizOrderTypeName",width: '110px' },
                    { title: "申请人", dataIndex: "createdUserName", width: '110px' },
                    { title: "所在部门", dataIndex: "createdDeptName", width: '110px' },
                    { title: "申请时间", dataIndex: "createdTime", width: '150px' },
                    { title: "当前节点", dataIndex: "taskKeyName", width: '150px' },
                ],
                data: [],
                customRow:(record)=>{
                    return {
                        on:{
                            click: (event) => {
                                
                            }
                        }
                    }
                }
            },
            // 新闻通知
            noticeList: {
                columns: [
                    { title: "新闻标题", dataIndex: "noticeTitle", customRender:(text)=>(<ZkEllipsis text={text} maxLength={20}></ZkEllipsis>) },
                    { title: "发布时间", dataIndex: "createTime", width: '120px' },
                ],
                data: [],
                customRow: (record)=>{
                    return {
                        on:{
                            click: () => {
                                this.toNoticeDetail(record);
                            }
                        }
                    }
                }
            },
            bodyStyleVal: {
                padding: 0
            }
        }
    },
    created() {
        this.refresh();
    },
    methods: {
        refresh() {
          
            
            // // 待办
            // queryOrderFlowTodoList().then((result) => {
            //     this.toDoList.data = result;
            // });
            // // 已办
            // queryOrderFlowDoneList().then((result) => {
            //     this.doneList.data = result;
            // });

            // 新闻通知
            // querySystemNoticeList({}, { pageNo: 1, pageSize: 4 }, '').then((result) => {
            //     this.noticeList.data.splice(0);
            //     if (result.data && result.data.length > 0) {
            //         result.data.forEach((item) => {
            //             item.createTime = item.createTime.split(' ')[0];
            //             this.noticeList.data.push(item);
            //         });
            //     }
            // });
        },
        toMoreToDoList() {
            this.$router.push('/todoList');
        },
        toMoreDoneList() {
            this.$router.push('/doneList');
        },
        toMoreNotice() {
            this.$router.push('/newsList');
        },
        // 新闻通知详情
        toNoticeDetail(item) {
            this.$router.push({
                path: '/newsDetail',
                query: {
                    id: item.noticeId,
                },
            });
        },
        toMoreMyAttendance() {
            // 我的考勤
            this.$info({
                content: '待下期完成'
            });
        },
        toPage(page){
            if (!page) {
                this.$info({
                    content: '待后续完成'
                });
                return;
            }
            this.$router.push(page);
        }
    }
}
</script>